.tablebox
{
    width: 1024px;
    height: 240px;

}
.tbox1
{
    width: 100%;
    height: 111px;
}
.tbox2
{
    width: 890px;
    height: 64px;
    margin: 0 auto;
    position: relative;
    bottom: 0px;
}
.tbox3
{
    width: 100%;
    height:67px;
}

.li1
{
    background-color: #4FC2F8;
    width: 147px;
    height: 84px;
    float: left;
    margin-left: 1px;
    position: absolute;
    bottom: 0px;
    left:-1px
}
.li1:hover
{
    animation:myfirst1 1s;
    -moz-animation:myfirst1 1s; /* Firefox */
    -webkit-animation:myfirst1 1s; /* Safari and Chrome */
    -o-animation:myfirst1 1s; /* Opera */
    height: 84px;
}
@-webkit-keyframes myfirst1 /* Safari and Chrome */
{
    0%   {height: 64px}
    100% {height: 84px;bottom: 0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
    0%   {height: 64px}
    100% {height: 114px;bottom: 0px;}
}
.li2
{
    background-color: #4DD0E2;
    width: 147px;
    height: 106px;
    float: left;
    margin-left: 1px;
    position: absolute;
    bottom: 0px;
    left:148px ;
}
.li2:hover
{
    animation:myfirst 1s;
    -moz-animation:myfirst 1s; /* Firefox */
    -webkit-animation:myfirst 1s; /* Safari and Chrome */
    -o-animation:myfirst 1s; /* Opera */
    height: 106px;
}
.li3
{
    background-color: #42BD41;
    width: 147px;
    height: 114px;
    float: left;
    margin-left: 1px;
    position: absolute;
    bottom: 0px;
    left:296px ;
}
.li3:hover
{
    animation:myfirst 1s;
    -moz-animation:myfirst 1s; /* Firefox */
    -webkit-animation:myfirst 1s; /* Safari and Chrome */
    -o-animation:myfirst 1s; /* Opera */
    height: 114px;
}
.li4
{
    background-color: #FFB74E;
    width: 147px;
    height: 84px;
    float: left;
    margin-left: 1px;
    position: absolute;
    bottom: 0px;
    left:444px ;
}
.li4:hover
{
    animation:myfirst1 1s;
    -moz-animation:myfirst1 1s; /* Firefox */
    -webkit-animation:myfirst1 1s; /* Safari and Chrome */
    -o-animation:myfirst1 1s; /* Opera */
    height: 84px;
}
.li5
{
    background-color: #FFD54F;
    width: 147px;
    height: 76px;
    float: left;
    margin-left: 1px;
    position: absolute;
    bottom: 0px;
    left:592px ;
}
.li5:hover
{
    animation:myfirst3 1s;
    -moz-animation:myfirst3 1s; /* Firefox */
    -webkit-animation:myfirst3 1s; /* Safari and Chrome */
    -o-animation:myfirst3 1s; /* Opera */
    height: 76px;
}
@-webkit-keyframes myfirst3 /* Safari and Chrome */
{
    0%   {height: 64px}
    100% {height: 76px;bottom: 0px;}
}
.li6
{
    background-color: #FF8A66;
    width: 147px;
    height: 106px;
    float: left;
    margin-left: 1px;
    position: absolute;
    bottom: 0px;
    left:740px ;
}
.li6:hover
{
    animation:myfirst 1s;
    -moz-animation:myfirst 1s; /* Firefox */
    -webkit-animation:myfirst 1s; /* Safari and Chrome */
    -o-animation:myfirst 1s; /* Opera */
    height: 106px;
}
.textbox1
{
    height: 31px;
    width: 890px;

    margin: 0 auto;
    position: relative;
    top: 36px;
}
.textbox2
{
    height: 31px;
    width: 890px;
    margin: 0 auto;
    position: relative;
    top: 13px;
}
.ttbox
{
    width: 147px;
    height: 26px;
    float: left;
    margin-left: 1px;
    text-align: center;
}
